<%--
  Created by IntelliJ IDEA.
  User: dqf
  Date: 2015/3/2
  Time: 16:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<style>
    .clsImg{width:300px;padding-bottom:28px !important;}
    .show_img_bottom_div{
        width: 100%;
        height: 50px;
        background-color: #aaaaaa;
        z-index: 100000000000;
        position: absolute;
        bottom: 0;
        filter: alpha(opacity=50);
        opacity: 0.5;
        -moz-opacity: 0.5;
        margin-left: -10px;
        text-align: center;
        line-height: 50px;
    }
    .rotate_btn{
        cursor:pointer;
        margin-right: 50px;
        font-size: 20px;
    }

</style>

<div class="row">
    <!-- NEW WIDGET START -->
    <article class="col-sm-12 col-md-12 col-lg-12">
        <div class="jarviswidget well" id="wid-id-3"
             data-widget-colorbutton="false"
             data-widget-editbutton="false"
             data-widget-togglebutton="false"
             data-widget-deletebutton="false"
             data-widget-fullscreenbutton="false"
             data-widget-custombutton="false"
             data-widget-sortable="false">
            <!-- widget div-->
            <div>
                <div class="widget-body">
                    <input type="hidden" name="viewType" id="viewType" value="<s:property value="viewType" />"/>
                    <a class="btn btn-default" id="btn-proback-common" href="javascript:void(0)">
                        <i class="fa fa-lg fa-mail-reply-all"></i>反馈信息
                    </a>
                    <shiro:hasAnyRoles name="wechat">
                    <a class="btn btn-default pull-right pull-right-fix" id="btn-proback-comment" href="javascript:void(0);"><i class="fa fa-lg fa-comment-o"></i> 批注</a>
                    </shiro:hasAnyRoles>
                    <hr class="simple">

                    <form id="proBack" class="smart-form" method="post">
                        <input type="hidden" name="keyId" id="keyId" value="<s:property value="proBack.id" />"/>

                        <header id="title" style="display: block;">
                            项目反馈表
                        </header>
                        <fieldset>
                            <div class="row">
                                <label class="label col col-2">
                                    <i class="fa fa-asterisk txt-color-red"></i>
                                    项目名称
                                </label>
                                <section class="col col-5">
                                    <label class="input state-disabled">
                                        <input disabled type="text" id="proInfoName"
                                               value="<s:property value="proBack.proInfo.name"/>"/>
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    <i class="fa fa-asterisk txt-color-red"></i>
                                    反馈类别
                                </label>
                                <section class="col col-5">
                                    <label class="input state-disabled">
                                        <input type="text" name="categoryName" id="categoryName" value="<s:property value="proBack.category.name"/>" disabled>
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    反馈日期
                                </label>
                                <section class="col col-2">
                                    <label class="input">
                                        <i class="icon-append fa fa-calendar"></i>
                                        <input disabled class="hasDatepicker form-control" name="backDate" id="backDate"
                                                type="text" value="<s:date name="proBack.backDate" format="yyyy-MM-dd"/>">
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    反馈人
                                </label>
                                <section class="col col-5">
                                    <label class="input state-disabled">
                                        <input type="text" name="creater" id="creater" value="<s:property value="proBack.creater.name"/>" disabled>
                                        <input type="hidden" name="createrId" id="createrId" value="<s:property value="proBack.creater.id"/>" disabled>
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    反馈内容
                                </label>
                                <section class="col col-5">
                                    <label class="input state-disabled">
                                        <input disabled name="content" id="content" placeholder="请输入反馈内容"
                                               type="text" value="<s:property value="proBack.content"/>">
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    反馈地址
                                </label>
                                <section class="col col-5">
                                    <label class="input state-disabled">
                                        <input disabled name="address" id="address" placeholder="请输入反馈地址"
                                               type="text" value="<s:property value="address"/>">
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    备注
                                </label>
                                <section class="col col-5">
                                    <label class="input state-disabled">
                                        <input disabled name="mark" id="mark" placeholder="请输入备注"
                                               type="text" value="<s:property value="proBack.mark"/>">
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    <i class="fa fa-asterisk txt-color-red"></i>
                                    是否正常
                                </label>
                                <section class="col col-5">
                                    <div class="inline-group">
                                        <label class="radio">
                                            <input disabled type="radio" id="regularY" name="regular" value="1" <s:property value="proBack.regular==1?'checked':''"/>>
                                            <i></i>是</label>
                                        <label class="radio">
                                            <input disabled type="radio" id="regularN" name="regular" value="0" <s:property value="proBack.regular==0?'checked':''"/>>
                                            <i></i>否</label>
                                    </div>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                     通知人员
                                </label>
                                <section class="col col-5">
                                    <label class="input state-disabled">
                                        <input disabled type="text" id="noticeName"
                                               value="<s:property value="validateUser(proBack.notice)"/>">
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    照片列表
                                </label>
                                <section class="col col-5">
                                    <s:iterator value="imgUrl" id="url">
                                        <img class="clsImg" src="<s:property value="#url" />">
                                    </s:iterator>
                                </section>
                            </div>
                        </fieldset>
                    </form>

                    <!--resume-->
                    <hr class="simple"/>
                    <div id="ajax-resume-list" class="well well-sm">

                    </div>
                </div>
            </div>
        </div>
    </article>
</div>

<script>
    pageSetUp();
    //返回视图
    $("#btn-proback-common").click(function(){
        var viewType = $("#viewType").val();
        if(viewType=="1"){
            loadURL("ajax-pro-back!view.action",$('div#business_data'));
        }
        if(viewType=="2"){
            loadURL("ajax-pro-back!tabview.action?proInfoId="+$("#keyId").val(),$('div#s4'));
        }
        if(viewType=="3"){
            loadURL("ajax-pro-back!warn.action",$('#content'));
        }
    });

    $('.hasDatepicker').datetimepicker({
        format: 'yyyy-mm-dd',
        weekStart: 1,
        autoclose: true,
        todayBtn: 'linked',
        language: 'zh-CN',
        minView:2
    });

</script>
<script type="text/javascript">
    var isMoving=false;
    var start_offset_x=0;
    var start_offset_y=0;

    $(function(){
        var keyId = $("form#proBack #keyId").val();
        var _target = $("#ajax-resume-list")
        var url = "ajax-resume!targetList.action";

        loadURL(url, _target,{data:{keyId:keyId}});

        $(".clsImg").click(function (e) {
            // Get on screen image
            var screenImage = $(this);
            // Create new offscreen image to test
            var theImage = new Image();
            theImage.src = screenImage.attr("src");
            // Get accurate measurements from that.
            var imageWidth = theImage.width;
            var imageHeight = theImage.height;
            //alert("w:" + imageWidth + " h:" + imageHeight);
            if(imageWidth<imageHeight){
                if(imageHeight>750){
                    imageWidth *= (750/imageHeight);
                    imageHeight = 720;
                }
            }else{
                if(imageWidth>750){
                    imageHeight *= (750/imageWidth);
                    imageWidth = 600;
                }
            }
            //alert("w:" + imageWidth + " h:" + imageHeight);
            var imgHtml = "<div id='show_img_div' style=' width:100%;height: 770px !important;overflow:hidden; padding: 10px;position:relative;'>" +
                    "<img style='position:absolute;left:100px;top:0;' id='show_img' src='"+screenImage.attr("src")+"' width="+imageWidth+" height="+imageHeight+">" +
                    "<div class='show_img_bottom_div'><span class='rotate_btn' id='rotate_left'>左转</span><span class='rotate_btn' id='rotate_right'>右转</span></div></div>";
            gDialog.fCreate({
                title: "照片预览",
                content:imgHtml,
                width:780
            }).show();


            //旋转
            var rotate_dgr = 0;
            $("#rotate_left").click(function(){
                rotate_dgr-=90
                $("#show_img").css("-webkit-transform","rotate("+rotate_dgr+"deg)");
            });
            $("#rotate_right").click(function(){
                rotate_dgr+=90
                $("#show_img").css("-webkit-transform","rotate("+rotate_dgr+"deg)");
            });

            var g_width = $("#show_img").width();
            var g_height = $("#show_img").height();
            document.ondragstart=function() {return false;}
            $("div[data-backdrop='static']").css("overflow","hidden");
            //$("div[class='modal fade ui-draggable in']").css("overflow","hidden");
            //var mousewheel = document.all?"mousewheel":"DOMMouseScroll";
            $("#show_img_div").height($("#show_img").height()+5);
            $("#show_img").mousewheel(function(event, delta, deltaX, deltaY){
                //console.log(delta, deltaX, deltaY);
                var t_width=$("#show_img").width()+delta*15;
                var t_height=$("#show_img").height()+delta*15*g_height/g_width;
                if (delta < 0){
                    t_width = ($("#show_img").width()>50 && $("#show_img").height()>50)?t_width:$("#show_img").width();
                    t_height = ($("#show_img").height()>50 && $("#show_img").width()>50)?t_height:$("#show_img").height();
                }
                $("#show_img").width(t_width);
                $("#show_img").height(t_height);
                //$("#show_img").css("margin-left", (parseInt($("#show_img").css("margin-left").split("p")[0])-delta*10)+"px");

                //event.stopPropagation();
                event.preventDefault();
            });

            $("#show_img").mousedown(function(e){
                isMoving = true;
                start_offset_x = e.pageX;
                start_offset_y = e.pageY;
                event.preventDefault();
            });
            $("#show_img").mousemove(function(e){
                if (!isMoving)
                    return;
                $("#show_img").css("left",(parseInt($("#show_img").css("left").split("p")[0])+e.pageX-start_offset_x)+"px").css("top",(parseInt($("#show_img").css("top").split("p")[0])+e.pageY-start_offset_y)+"px");
                start_offset_x = e.pageX;
                start_offset_y = e.pageY;
                event.preventDefault();
            });
            $("html").mouseup(function(){
                isMoving = false;
                event.preventDefault();
            });
        });

    });

    $("#btn-proback-comment").off("click").on("click",function(){
        var actionUrl = "ajax-comment!list.action";
        var id = $("form#proBack input#keyId").val();
        var data = {keyId:id};
        $(this).leftview('init',{
            title:"批注信息",
            actionUrl:actionUrl,
            data:data
        });
        $(this).leftview('foot',{callback:common_click});
    });

    function common_click(){
        $("#left_foot_btn_comment").off("click").on("click",function(){
            var actionUrl = "ajax-comment!save.action";
            var id = $("form#proBack input#keyId").val();
            var text = $("#chat_textarea-expand").val();
            var createrId = $("#createrId").val();
            var parentId = $("#chat_keyId li:first").attr("id");
            var data = {
                targetId:id,
                parentId:parentId,
                text:text,
                toUsersId:createrId,
                targetObject:"com.joint.core.entity.ProBack"
            };
            ajax_action(actionUrl,data,null,function(data){
                _show(data);
                $(this).leftview('leftClose');
            });
        })
    }

</script>
